import React from 'react';
import { createRoot } from 'react-dom/client';
import { QueryClientProvider } from '@tanstack/react-query';
import { Popup } from '@/pages/Popup/Popup';
import { ToastContainer } from '@/components/ui/Toast';
import { queryClient } from '@/lib/queryClient';
import '@/index.css';
import { initStorageMode } from '@/config/storageMode';
import { initExtensionEnv } from '@/lib/extensionEnv';

// Popup应用根组件
const PopupApp: React.FC = () => {
  return (
    <QueryClientProvider client={queryClient}>
      {/* 主要Popup页面 */}
      <Popup />

      {/* 全局Toast通知容器 */}
      <ToastContainer />
    </QueryClientProvider>
  );
};

// 启动函数：避免顶层 await，确保初始化完成后再渲染
(async function bootstrap() {
  // 优先缓存扩展ID，满足“加载即得”
  initExtensionEnv();
  await initStorageMode();

  const rootElement = document.getElementById('root');
  if (!rootElement) throw new Error('根元素#root未找到，请检查popup.html文件');

  const root = createRoot(rootElement);
  root.render(<PopupApp />);
})();
